<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="ransomware-resource-table double-row-height">
    <lv-datatable [lvData]="tableData" class="aui-table-group" [lvPaginator]="page" (lvSortChange)="sortChange($event)"
        lvSort #lvTable lvAsync lvMultiGroup>
        <colgroup>
            <ng-container *ngFor="let column of columns">
                <ng-container *ngIf="column.children">
                    <ng-container *ngFor="let col of column.children">
                        <ng-container *ngIf="col.show">
                            <ng-container *ngIf="col.width; else elseTemplate">
                                <col [ngStyle]="{'width': col.width}" />
                            </ng-container>
                            <ng-template #elseTemplate>
                                <col />
                            </ng-template>
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>
        </colgroup>
        <thead>
            <tr>
                <ng-container *ngFor="let item of columns">
                    <th *ngIf="item.show" [attr.colspan]="filter(item.children, {'show': true}).length"
                        [attr.width]="item.width">
                        <span lv-overflow>{{item.label}}</span>
                    </th>
                </ng-container>
                <th rowspan="2" width="144px" lvShowCustom>
                    {{ 'common_operation_label' | i18n }}
                    <i lv-icon="aui-icon-help" lv-tooltip="{{'common_cyberengine_worm_disrestore_label' | i18n}}"
                        lvTooltipPosition="rightTop" lvTooltipTheme="light"
                        class="operation-help-icon" lvColorState='true'></i>
                    <div lvCustom>
                        <i lv-icon="lv-icon-col-setting" #colPopover="lvPopover" lv-popover
                            lvPopoverPosition="bottomRight" [lvPopoverContent]="colHideTpl" lvPopoverTheme="light"
                            lvPopoverTrigger="click" style="cursor: pointer;">
                        </i>
                    </div>
                </th>
            </tr>
            <tr>
                <ng-container *ngFor="let column of columns">
                    <ng-container *ngIf="column.children">
                        <ng-container *ngFor="let col of column.children">
                            <th *ngIf="col.show" [attr.class]="col.class" [attr.width]="col.width"
                                [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
                                [(lvFilters)]="col.filterMap" [lvCellKey]="col.key" [lvShowSort]="col.sort" lvShowCustom
                                lvFilterCheckAll lvFilterSearch>
                                <span lv-overflow>
                                    {{col.label}}
                                    <div lvCustom *ngIf="col.key === 'added_file_count'" class="resource-sla-help">
                                        <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_add_file_label' | i18n}}"
                                            lvTooltipTheme="light" class="configform-constraint"
                                            lvColorState='true'></i>
                                    </div>
                                    <div lvCustom *ngIf="col.key === 'changed_file_count'" class="resource-sla-help">
                                        <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_modify_file_label' | i18n}}"
                                            lvTooltipTheme="light" class="configform-constraint"
                                            lvColorState='true'></i>
                                    </div>
                                    <div lvCustom *ngIf="col.key === 'deleted_file_count'" class="resource-sla-help">
                                        <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_delete_file_label' | i18n}}"
                                            lvTooltipTheme="light" class="configform-constraint"
                                            lvColorState='true'></i>
                                    </div>
                                    <div lvCustom *ngIf="col.key === 'infected_file_count'" class="resource-sla-help">
                                        <i lv-icon="aui-icon-help"
                                            lv-tooltip="{{'explore_infected_file_help_label' | i18n}}"
                                            lvTooltipTheme="light" class="configform-constraint"
                                            lvColorState='true'></i>
                                    </div>
                                </span>
                                <div lvCustom *ngIf="col.key === 'name'">
                                    <aui-custom-table-search (search)="searchByResourceName($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'tenant_name'">
                                    <aui-custom-table-search (search)="searchBytenantName($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                            </th>
                        </ng-container>
                    </ng-container>
                </ng-container>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData; trackBy: trackByUuid">
                <tr>
                    <ng-container *ngFor="let column of columns">
                        <ng-container *ngIf="column.children">
                            <ng-container *ngFor="let col of column.children">
                                <ng-container *ngIf="col.show">
                                    <td>
                                        <ng-container [ngSwitch]="col.key">
                                            <ng-container *ngSwitchCase="'name'">
                                                <span class="aui-link" lv-overflow (click)="getResourceDetail(item)">
                                                    {{item.name}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'device_name'">
                                                <p lv-overflow>
                                                    {{item.device_name | nil}}
                                                </p>
                                                <p lv-overflow class='aui-text-help-sm'>
                                                    {{item.device_ip | nil}}
                                                </p>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'total_copy_num'">
                                                <span [ngClass]="{'aui-link': item.total_copy_num > 0}"
                                                    (click)="getResourceDetail(item, true)">
                                                    {{item.total_copy_num}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'status'">
                                                <ng-container>
                                                    <aui-status [value]="item.status" type="detectionSnapshotStatus">
                                                    </aui-status>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'generate_type'">
                                                <span lv-overflow>
                                                    {{item.generate_type | textMap: 'snapshotGeneratetype'}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'total_file_size'">
                                                <ng-container *ngIf="_isNumber(item.total_file_size); else emptyTpl">
                                                    <span lv-overflow>
                                                        {{item.total_file_size |
                                                        capacityCalculateLabel:'1.0-0':unitconst.BYTE: true}}
                                                    </span>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container *ngSwitchDefault>
                                                <span lv-overflow>
                                                    {{item[col.key] | nil}}
                                                </span>
                                            </ng-container>
                                        </ng-container>
                                    </td>
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </ng-container>
                    <td width="144px">
                        <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
</div>
<div class="aui-paginator-wrap">
    <lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex" #page
        (lvPageChange)="pageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="!total">
    </lv-paginator>
</div>

<ng-template #tenantNameFilterTpl>
    <lv-search [(ngModel)]="tenantName" (lvSearch)="searchBytenantName($event)" [lvFocus]="true">
    </lv-search>
</ng-template>

<ng-template #emptyTpl>
    --
</ng-template>

<ng-template #colHideTpl>
    <lv-tree [lvData]="columns" [lvShowCheckbox]="true" lvSelectionMode="multiple"
        [(lvSelection)]="columnSelection" (lvCheck)="columnCheck($event)"
        [lvScroll]="virtualScroll.scrollParam"></lv-tree>
</ng-template>
